<template>
  <div></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "Shuiqiu",
  data() {
    return {};
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      var myChart = echarts.init(document.getElementById("main"));

      window.onresize = myChart.resize;
      myChart.setOption({
        series: [
          {
            radius: "100%",
            type: "liquidFill",
            data: [
              {
                name: "使用率",
                value: "80%",
              },

              0.8,

              0.6,
              //   0.4,
            ],
            shape: "circle",
            backgroundStyle: {
              //   borderWidth: 1,
              //   borderColor: "red",
              color: "#0156c7",
            },
            outline: {
              show: false,
            },
            color: ["#2a95ec", "#086eeb", "#33b5d8", "#40e2bc"],

            // color: {
            //   type: "linear",
            //   colorStops: [
            //     {
            //       offset: 1,
            //       color: "rgba(58, 71, 212, 0)",
            //     },
            //     {
            //       offset: 0.5,
            //       color: "rgba(31, 222, 225, .2)",
            //     },
            //     {
            //       offset: 0,
            //       color: "rgba(31, 222, 225, 1)",
            //     },
            //   ],
            //   globalCoord: false,
            // },
            label: {
              normal: {
                formatter: "{c}\n {b} ",
                textStyle: {
                  fontSize: 18,
                  color: "#48eaff",
                  // fontFamily: "YouSheBiaoTiHei",
                },
              },
            },
            center: ["50%", "50%"],
          },
        ],
      });
    },
  },
};
</script>

<style lang="sass" scoped></style>
